<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组降维</title>
</head>

<body>
  <script>
    // const arr=[1,[[2,[3],4],5,6,7],8,{}]
    // // 通过flat设置Infinity展开任意深度数组
    // console.log(arr.flat(Infinity)) //[1, 2, 3, 4, 5, 6, 7, 8]


    //思路:递归+类型判断
    //创建新数组存储降维后的数组,通过forEach遍历数组,Array.isArray判断每一项类型;若为数组则递归重复之前操作;若不为数组则用新数组保存数据
    // const arr = [1, [[2, [3], 4], 5, 6, 7], 8]
    // const arr1 = []
    // function newFlat(arr) {
    //   arr.forEach(item => {
    //     Array.isArray(item) ? newFlat(item) : arr1.push(item)
    //   })
    // }
    // newFlat(arr)
    // console.log(arr1)// [1, 2, 3, 4, 5, 6, 7, 8]

    //上面方法必须新创建数组,存在局限性,优化函数
    //   const arr = [1, [[2, [3], 4], 5, 6, 7], 8,]
    //   function newFlat(arr) {
    //   return  arr.reduce((pre,cur) => {
    //      return  Array.isArray(cur) ? pre.concat(newFlat(cur)) : pre.concat(cur)
    //     },[])
    //   }
    //  console.log( newFlat(arr)) //[1, 2, 3, 4, 5, 6, 7, 8]

    //  我们也可以用扩展运算符替代concat
    // const arr = [1, [[2, [3], 4], 5, 6, 7], 8]
    // function newFlat(arr) {
    //   return arr.reduce((pre, cur) => {
    //     return Array.isArray(cur) ? [...pre, ...newFlat(cur)] : [...pre, cur]
    //   }, [])
    // }
    // console.log(newFlat(arr)) //[1, 2, 3, 4, 5, 6, 7, 8]

    // 使用堆栈stack
    const arr = [1, [[2, [3], 4], 5, 6, 7], 8]
    function newFlat(input) {
      const stack = [...input]
      const result = []
      while (stack.length) {
        const next = stack.pop()
        // 使用 pop 从 stack 中取出并移除值
        if (Array.isArray(next)) {
          //使用 push 送回内层数组中的元素，不会改动原始输入
          stack.push(...next)
        } else {
          // 去除空位
          next && result.push(next);

        }
      }
      // 反转恢复原数组的顺序
      return result.reverse()
    }
    console.log(newFlat(arr)) //[1, 2, 3, 4, 5, 6, 7, 8]
  </script>
</body>

</html>